<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>查询所有联系人</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        tr, th {
            text-align: center;
        }
    </style>
</head>
<div><h2><%=session.getAttribute("username")+"用户"%></h2></div>
<body>
<div class="container">
    <h2 class="text-center">联系人列表</h2>
    <%--提交给Servlet，使用get方法--%>
    <form action="list" method="get" class="form-inline" id="contactForm">
        <div class="row text-right" style="margin-bottom: 10px; margin-top: 15px;">
            <div class="col-md-4 text-left">
                <a class="btn btn-primary" style="width: 120px" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <table border="1" class="table table-bordered table-hover">
                    <tr class="success">
                        <th>编号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>籍贯</th>
                        <th>QQ</th>
                        <th>邮箱</th>
                        <th>操作</th>
                    </tr>
                    <%--items要遍历的集合，var表示集合中每个元素
                    varStatus设置状态对象，
                    有4个属性：first, last, index, count
                    分页查询要遍历的是pageBean.data属性，这是封装了这一页数据的集合
                     --%>
                    <c:forEach items="${pageBean.list}" var="contact" varStatus="row">
                        <tr>
                            <%--
                            id是给程序员使用的，最终用户最好看到一个连续的编号
                            编号 1~5： count是1~5 ，size 是 5，current 是 1
                            编号 6~10： count是1~5 ，size 是 5，current 是 2
                            编号 11~15： count是1~5 ，size 是 5，current 是 3
                            --%>
                           <%-- <td>${row.count + (pageBean.current - 1) * pageBean.size}</td>--%>
                                <td>${row.count}</td>
                            <td>${contact.name}</td>
                            <td>${contact.gender}</td>
                            <td>${contact.age}</td>
                            <td>${contact.address}</td>
                            <td>${contact.qq}</td>
                            <td>${contact.email}</td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                        <%--点修改跳转到servlet中并且传递当前联系人的id做为参数--%>
                                    <a class="btn btn-success btn-xs" href="${pageContext.request.contextPath}/StudentServlet/findById?id=${contact.id}">修改</a>&nbsp;
                                        <%--调用删除的servlet，如果这是一个链接，链接调用js代码的方法 javascript:js代码 --%>
                                    <a class="btn btn-info btn-xs" href="${pageContext.request.contextPath}/StudentServlet/delete?id=${contact.id}">删除</a>
                                </div>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
        </div>

        <div class="row text-center">
            <div class="btn-group btn-group-sm">
                <%--调用一个JS的方法，进行页面跳转。方法提供2个参数：当前页，每页的大小--%>
                <a href="${pageContext.request.contextPath}/StudentServlet/findByPage?currentPage=1" class="btn btn-default">首页</a>
                    <c:if test="${pageBean.currentPage!=1}">
                <a href="${pageContext.request.contextPath}/StudentServlet/findByPage?currentPage=${pageBean.currentPage-1}" class="btn btn-default">上页</a>
                    </c:if>
                    <c:if test="${pageBean.currentPage==1}">
                        <a href="#" class="btn btn-default">上页</a>
                    </c:if>
                    <c:if test="${pageBean.currentPage!=pageBean.totalPage}">
                        <a href="${pageContext.request.contextPath}/StudentServlet/findByPage?currentPage=${pageBean.currentPage+1}" class="btn btn-default">下页</a>
                    </c:if>
                    <c:if test="${pageBean.currentPage==pageBean.totalPage}">
                        <a href="#" class="btn btn-default">下页</a>
                    </c:if>
                <a href="${pageContext.request.contextPath}/StudentServlet/findByPage?currentPage=${pageBean.totalPage}" class="btn btn-default">末页</a>
            </div>

          共${pageBean.totalPage}页 共${pageBean.totalCount}条
        </div>
    </form>
</div>

</div>
</body>


</html>
